@import "../../../assets/style/global";

.app-header{
    .app-list-title{
      position: relative;
      .title-name{
        color: #e1eaf9;
        font-size: 20px;
        height: 80px;
        line-height: 80px;
      }
      .app-div{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        .add-btn{
            height: 40px;
            width: 80px;
            cursor: pointer;
          }
      }
      .next-title{
        text-align: center;
        position: relative;
        .next-back{
            position: absolute;
            left: 0;
            top: 50%;
            display: inline-block;
            transform: translate(0, -50%);
            cursor: pointer;
            &:hover{
                color: $blueLight;
            }
        }
      }
      .next-sub-span{
        display: inline-block;
        width: 140px;
      }
      .subject-btn{
        height: 40px;
        width: 90px;
        margin: 5px;
        cursor: pointer;
      }
      .subject-div{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
      }
      .app-text{
        position: absolute;
        color: #e1eaf9;
        left: 0;
        top: 60px;
        bottom: 0.5rem;
      }
    }
  }

  .subject-content{
    margin-top: 30px;
    .subject-list{
        overflow-y: auto;
        height: calc(100vh - 210px);
        padding: 0px 5px;
        .subject-item{
            height: 40px;
            line-height: 40px;
            margin: 10px 0;
            padding: 0 5px;
            color: #D1DCE3;
            font-size: 16px;
            border: 1px solid rgba(224, 224, 224, 0.1);
            cursor: pointer;
            &:hover{
                border: 1px solid $blueLight;
            }
            .item-name{
                &:hover{
                    color: $blueLight;
                }
            }
            .col-right{
                display: flex;
                justify-content: space-between;
            }
            &:hover{
                background: $bgColor;
            }
            &.active{
                background: $bgColor;
            }
        }
    }
}

  .app-ipt{
    height: 30px;
    color: #e1eaf9;
    margin-top: 30px;
    .ant-input{
      margin: 0;
      padding: 0;
      font-variant: tabular-nums;
      list-style: none;
      -webkit-font-feature-settings: 'tnum';
      font-feature-settings: 'tnum';
      position: relative;
      display: inline-block;
      width: 100%;
      height: 32px;
      padding: 4px 11px;
      color: #D1DCE3;
      font-size: 14px;
      line-height: 1.5;
      background-color: transparent;
      background-image: none;
      border: 1px solid #188AE2;
      border-radius: 4px;
      transition: all 0.3s;
    }
  }

  .app-list-content{
    .app-content-title{
      .app-content-tab{
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 12px 16px;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        line-height: 36px;
        color: $gray;
        .ant-tabs-bar{
            border-bottom: transparent;
            margin: 0;
            .ant-tabs-tab{
                margin: 0;
                border-bottom: 2px solid $gray;
            }
        }
        &.active {
          border-bottom: 2px solid $blue;
          color: #D1DCE3;
        }
      }
  
    }
    .app-list{
      margin: 10px 0;
      font-size: 14px;
      // overflow-y: auto;
      // height: calc(100vh - 250px);
      .ant-row {
        text-align: center;
        &.app-item{
            &:hover{
                background: $bgColor;
            }
            &.active {
                background: $bgColor;
            }
        }
        .app-list-col{
          height: 60px;
          line-height: 60px;
          color: #D1DCE3;
          border-bottom: 1px solid rgba(224, 224, 224, 0.1);
          .app-list-col-delete{
            color: $yellow;
            cursor: pointer;
          }
          .app-list-col-add{
            color: $blueLight;
            margin-left: 20px;
            cursor: pointer;
          }
          .item-name{
              cursor: pointer;
              &:hover{
                  color: $blueLight;
              }
          }
        }
      }
      .app-list-header{
        font-size: 16px;
        .app-list-col{
          color: $gray;
        }
        .app-list-icon{
          transform: rotate(90deg);
          color: $blueLight;
          cursor: pointer;
          display: inline-block;
        }
      }
      .app-list-body{
          overflow-y: auto;
          height: calc(100vh - 390px);
      }
    }
   
  }